<!DOCTYPE html6>
<html6 lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linux Terminal - HTML6</title>
  
  <css-module src="https://cdn.example.com/terminal.css" />
  <js-module src="https://cdn.example.com/terminal-core.js" />
</head>

<body>
  <container layout="grid" columns="1fr" rows="auto 1fr auto">
    <terminal-bar theme="dark">
      <system-info>HTML6 Terminal</system-info>
      <connection-status>Secure</connection-status>
      <time-display format="HH:mm:ss"></time-display>
    </terminal-bar>
    
    <terminal-output id="output" virtual-scroll>
      <command-history>
        <entry user="user@html6:~$" command="neofetch">
          OS: HTML6 Terminal v2.0
          Shell: QuantumShell 8.4
        </entry>
      </command-history>
      <prompt-line></prompt-line>
    </terminal-output>
    
    <command-input id="cmd-input" 
                   ai-suggestions 
                   vr-compatible
                   onexecute="processCommand">
      <button icon="send" />
    </command-input>
  </container>
  
  <script type="module/terminal">
    import { Terminal, LinuxFS } from 'terminal-core';
    
    const myTerminal = new Terminal('#output', {
      filesystem: new LinuxFS({
        '/home/user': {
          'documents': { type: 'dir' },
          'code': { type: 'dir' },
          'notes.txt': { content: 'HTML6 is awesome!' }
        }
      }),
      commands: {
        ...bash.standard(),
        ...networkTools(),
        custom: {
          hologram: () => render3DView()
        }
      }
    });
    
    function processCommand(cmd) {
      myTerminal.execute(cmd);
      adaptiveUI.adjustForCommand(cmd);
    }
  </script>
  
  <xr-layer id="hologram-view" activate-on="hologram" />
</body>
</html6>